<template>
  <div v-if="!playout">
    <el-dialog
    class="videodialog"
    @close="handleVideoClose"
    :close-on-click-modal="true"
    :visible.sync="vidoeVisible"
    width="1130px">
      <div class="videobox" v-loading="loading" :style="{height: iframHeiht + 'px'}">
        <div id="videoLoad"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Video',
  data() {
    return {
      loading: true,
      vidoeVisible: false,
      lang: '',
      playout: false, // 是否退出播放
      iframHeiht: '650',
      videoUrl: '',
    }
  },
  components: {
  },
  props: {
    videoConfig: Object
  },
  computed: {
  },
  watch: {
    'videoConfig.open': function change(val) {
      if (val) {
        this.loading = true;
        this.playout = false;
        this.vidoeVisible = val;
        this.handleIframLoad();
      }
    },
    '$store.state.app.language': function change(val) {
      this.lang = val;
      this.videoUrl = this.handleVideoUrl();
    }
  },
  mounted() {
    this.lang = this.$store.state.app.language;
    this.videoUrl = this.handleVideoUrl();
  },
  methods: {
    handleVideoClose() {
      this.playout = true;
      this.$emit('listenVideoLevel', 'close');
    },
    handleIframLoad() {
      const self = this;
      const videoId = document.getElementById('videoLoad');
      if (videoId) {
        const iframe = document.createElement('iframe');
        const videoUrl = this.handleVideoUrl();
        if (this.lang === 'zh-CN' || this.lang === 'zh-TW') {
          const html = `<style>html,body,video{margin:0;padding:0;}</style><video src="${videoUrl}"
          style="width:100%; height: 100%;" autoplay="autoplay" controls></video>`;
          iframe.src = `data:text/html;charset=utf-8, ${encodeURI(html)}`;
        } else {
          iframe.src = videoUrl;
        }
        self.loading = false;
        iframe.style = `width: 100%; height: ${this.iframHeiht}px; vertical-align: middle`;
        iframe.frameBorder = '0';
        if (iframe.attachEvent) {
          iframe.attachEvent('onload', () => {
            self.loading = false;
          });
        } else {
          iframe.onload = (() => {
            self.loading = false;
          });
          document.getElementById('videoLoad').appendChild(iframe);
        }
        return;
      }
      setTimeout(() => {
        this.handleIframLoad();
      }, 500)
    },
    handleVideoUrl() {
      let vurl = this.videoConfig.en;
      if (this.lang === 'zh-CN' || this.lang === 'zh-TW') {
        vurl = this.videoConfig.zh;
      }
      return vurl;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-clolor: #278eda;
$-clolor2: RGBA(20, 159, 252, 1.00);
.colorThis {
  color: $-clolor !important;
  cursor: pointer;
}

iframe {
  vertical-align: middle;
}


.videodialog {
  /deep/ .el-dialog {
    margin: 0 auto 0 !important;
    top: 50%;
    transform: translateY(-50%);
  }

  /deep/ .el-dialog__body {
    padding: 0;
  }
  /deep/ .el-dialog__header {
    padding: 0;

    .el-dialog__headerbtn {
      right: -30px;
      top: -5px;
      color: #ddd;
    }
  }
}

.videoLoad {
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
